<template>
  <div style="width: 100%; height: 100%">
    <FullscreenExitOutlined
      title="单击收起"
      style="position: absolute; top: 20px; right: 60px; color: #fff; font-size: 16px"
      @click="fold"
    />
    <div ref="containerRef" style="position: relative; width: 100%; height: 100%">
      <iframe
        :ref="ref"
        :src="iframeUrl"
        width="100%"
        height="100%"
        style="width: 100%; height: 100%; border: none"
        @load="onLoad"
      />
      <a-spin
        v-if="loading"
        :spinning="loading"
        size="large"
        style="
          position: absolute;
          z-index: 9999;
          top: 0;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.8);
        "
      />
    </div>
  </div>
</template>

<script>
import { createApp } from 'vue';
import { FullscreenExitOutlined } from '@ant-design/icons-vue';
import { getUUID } from '../../utils/index.js';
import { handleCommonResult } from '../../utils/resolver.js';
import { getTargetUpperElem } from '../../utils/domUtils.js';
import { getVideoConferencingRoomId } from './index.js';
import PanelFolder from '../../utils/PanelFolder.js';
import ContactsBook from './contacts-book.vue';
import env from '@gis/lib/env.js';

const iframeUrlDev = 'node_modules/@gis/lib/components/tx-webrtc/iframe/index.html';

export default {
  name: 'tx-webrtc',
  components: { FullscreenExitOutlined },
  props: {
    roomId: { type: [Number, String], default: undefined },
    areaCode: { type: String, default: undefined },
  },
  data() {
    return {
      ref: 'iframe-' + Date.now().toString(36),
      activeUserIds: [],
      loading: false,
      dataList: [
        // { title: "网格员", children: [{ name: "12114" }] },
        // { title: "公安", children: [{ name: "234235" }] },
      ],
    };
  },
  computed: {
    room_id() {
      return this.roomId || getVideoConferencingRoomId(this.areaCode);
    },
    iframeUrl() {
      const userId = getUUID();
      return (env.DEV ? iframeUrlDev : './iframe/index.html') + `?roomId=${this.room_id}&userId=${userId}`;
    },
  },
  created() {
    this.loading = true;
  },
  mounted() {
    // console.log(this.$refs.containerRef)
    const dialogEl = getTargetUpperElem(this.$refs.containerRef, (el) => {
      // console.log(el);
      return el.classList.contains('ant-modal-wrap');
    });
    // console.log(dialogEl)
    this.panelFolder = new PanelFolder(dialogEl, {
      buttonStyle: {
        color: '#fff',
        background: 'rgba(11, 26, 38, 0.97)',
        border: '1px solid rgba(132, 255, 237, 0.75)',
      },
    });
  },
  unmounted() {
    this.destroy();
  },
  methods: {
    async getDataAsync() {
      const params = { area_code: this.areaCode };
      const data = handleCommonResult(
        await this.$axios.get('/xw-microservice/xw-analysis/v3/zz_people/videoConnectionList', {
          params,
        })
      );
      this.dataList = data && data.length ? data : [];
    },
    getUserData(id) {
      if (this.dataList && this.dataList.length) {
        for (const item of this.dataList) {
          if (item.children && item.children.length) {
            for (const subItem of item.children) {
              if (subItem.account === id) return subItem;
            }
          }
        }
      }
    },
    addActiveUserIds(id) {
      if (this.activeUserIds.indexOf(id) < 0) {
        this.activeUserIds.push(id);
      }
    },
    delActiveUserIds(id) {
      const index = this.activeUserIds.indexOf(id);
      if (index >= 0) {
        this.activeUserIds.splice(index, 1);
      }
    },
    async onLoad() {
      const $iframe = this.$refs[this.ref];
      this.iframeWin = $iframe.contentWindow;
      this.iframeDoc = $iframe.contentDocument;
      this.iframeWin.getUserData = (id) => {
        this.getUserData(id);
      };
      this.iframeWin.addActiveUserIds = (id) => {
        this.addActiveUserIds(id);
      };
      this.iframeWin.delActiveUserIds = (id) => {
        this.delActiveUserIds(id);
      };
      this.$watch(
        () => this.areaCode,
        async (area_code) => {
          if (area_code) {
            await this.getDataAsync();
            this.renderContactsList();
          }
        },
        { immediate: true }
      );
      this.loading = false;
    },
    renderContactsList() {
      if (!this.$ContactsBook) {
        this.$ContactsBook = createApp(ContactsBook, {
          roomId: this.room_id,
          dataList: this.dataList,
          activeUserIds: this.activeUserIds,
        });
        this.$ContactsBook.mount(this.iframeDoc.getElementById('member-list'));
      }
    },
    fold() {
      this.panelFolder.fold();
    },
    destroy() {
      this.panelFolder.destroy();
      if (this.$ContactsBook) {
        this.$ContactsBook.unmount();
      }
    },
  },
};
</script>

<style></style>
